<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建房间</title>
    <style>
       
       html,body {
            height: 100%;
            width: 100%;
            background-image: url(./img/create_room.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        
        #content{
            position: absolute;
            left:80%;  
            top:50%;  
            margin:-100px 0 0 -150px 
        }

        #send_msg{
            width: 300px;
            height: 50px;
            background-color: #ffffff55;
            font-size: 30px;
            border: 2px solid rgba(255, 238, 204, 0.547)(255, 238, 204, 0.727); border-radius: 5px;
            vertical-align: top;
        }

        #send_button{
            width: 150px;
            height: 40px;
            background-color: aquamarine;
            font-size: 20px;
            margin-top: 20px;
            text-align: center;
        }

        #return_button{
            width: 150px;
            height: 40px;
            background-color: aquamarine;
            font-size: 20px;
            margin-top: 20px;
            text-align: center;
        }

        #return_button:active{
         
            background-color: rgb(137, 222, 118);
        }

        #send_button:active{
         
            background-color: rgb(137, 222, 118);
        }

        
    </style>
    <link rel="shortcut icon" href="./img/favicon.ico" >
</head>
<body>

    <div id="content">
        <p style="font-size: 20px;">输入房间id，即可进入观战</p>
        <input type="text" id="send_msg"> <br>
        <button id="return_button">返回大厅</button> <button id="send_button">加入</button>
    </div> 

</body>

    <!-- 导入ajax包 -->
    <script src="./js/jquery.min.js"></script>

    <script>
        var rt_bt = document.getElementById("return_button");
        rt_bt.onclick = function(){
            console.log("返回对弈大厅");
            location.replace("/game_hall.html");
        }

        var match_bt = document.getElementById("send_button");
        match_bt.onclick = function(){ 

        //点击发送，将进入游戏房间
        var req_json = {
            optype: "viewer",
            room_id: document.getElementById("send_msg").value
        }

        alert(JSON.stringify(req_json));

        $.ajax({
            url:'/viewer',
            type:'POST',
            data: JSON.stringify(req_json),
            success(res){
                if (res.result == true)
                {
                    location.replace("/game_room.html")
                }
                else
                {
                    alert("该房间对战已结束");
                }
            },
            error(xhr){
                alert(JSON.stringify(xhr))
            }      
        })
    }

    </script>
</html>